混合项目(js + ts)中的 eslint 配置

javascript

最近项目开始逐步由 js 过渡到 ts，也就造成项目中同时存在 js, jsx 及 ts, tsx 的情形，于是代码的格式校验成为一个问题。

在一番了解后知道 ts 有专门的 tslint，也就是我们可以使用 eslint 校验原本的 js 代码，使用 tslint 来校验我们新写的 ts 的代码，但后来发现在 2019 年 1 月份，tslint 项目的创建者宣布不再继续维护 tslint，并决定为 eslint 支持 typescript 校验贡献他们的力量。

“In order to avoid bifurcating the linting tool space for TypeScript, we therefore plan to deprecate TSLint and focus our efforts instead on improving ESLint’s TypeScript support.” - **TSLint in 2019

这也许是个好消息，个人觉得一个项目里弄两套 lint 工具显得比较冗余。

于是我就打算更改下现有的 eslint 配置，使其可以校验 ts 的代码。

一搜索发现网上果然有很多人也是这样做的，这里涉及到 eslint 的 override 配置，使用这个配置可以使得我们对 ts ， tsx 文件使用其他的 parser 及 规则。需要注意的是 eslint 版本最好是 6.0 以上，因为 6.0 版本修复了一些关于 override 相关的 bug， 此外 eslint 的相关依赖也最好进行下升级。不然可能会报一些莫名其妙的错误。

安装 typescript-eslint/eslint-plugin， typescript-eslint/parser ，及 eslint，添加 ts 相关配置

1
npm i @typescript-eslint/{eslint-plugin,parser} eslint -D

最终配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      'legacyDecorators': true
    },
  },
  env: {
    es6: true,
    commonjs: true,
    browser: true,
  },
  extends: [
    'airbnb-base',
  ],
  plugins: [
    'react',
    'babel',
    'promise'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // ......
  },
  overrides: [
    {
      files: ['src/**/*.ts', 'src/**/*.tsx'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        sourceType: 'module',
        project: './tsconfig.json',
      },
      plugins: [ '@typescript-eslint' ],
      rules: Object.assign(typescriptEslintRecommended.rules, {
        // other customize rules
      })
    }
  ]
}